import React, { useEffect } from 'react';
import { connect } from 'umi';
import isEmpty from 'lodash/isEmpty';
import clone from 'lodash/clone';
import { get as getPath } from 'object-path';
import { Form, DatePicker, Input, TreeSelect } from 'antd';
import { AdvancedSearch } from '@/components';

const { RangePicker } = DatePicker;
const { TreeNode } = TreeSelect;

const SearchList = props => {
    const { dispatch, form, applyCommon } = props;
    const { applytype } = applyCommon;

    const {
        searchProps = {
            label: '申请主题',
            placeholder: '请输入主题',
            value: ''
        },
        dateProps = { label: '发起时间' },
        typeProps = {
            label: '申请类型',
            placeholder: '请选择申请类型',
            applytypeData: []
        }
    } = props;

    const { getFieldDecorator } = form;

    // 表单数据
    const handleSubmit = () => {
        props.form.validateFieldsAndScroll((err, value) => {
            if (!err) {
                const obj = clone(value);
                delete obj.Time;
                if (!isEmpty(value.Time)) {
                    obj.startTime = value.Time[0].format('YYYY-MM-DD 00:00:00');
                    obj.endTime = value.Time[1].format('YYYY-MM-DD 23:59:59');
                } else {
                    obj.startTime = '';
                    obj.endTime = '';
                }
                obj.title = getPath(obj, 'title', '');
                obj.templateNameList = getPath(obj, 'templateNameList', []);
                props.onSearch(obj);
            }
        });
    };

    const renderApplytypeTreeNodes = treeSelectDate =>
        treeSelectDate &&
        treeSelectDate.map(item => {
            if (item.templateList) {
                return (
                    <TreeNode key={item.category} title={item.category} value={item.category}>
                        {renderApplytypeTreeNodes(item.templateList)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.templateId} title={item.templateName} value={item.templateName} />;
        });

    useEffect(() => {
        // 申请类型字典
        dispatch({
            type: 'applyCommon/fetchTypeData',
            payload: {
                code: 'flowType',
                isShowChildFormat: 1
            }
        });
        // 流程状态字典
        dispatch({
            type: 'applyCommon/fetchStatuslist',
            payload: {
                code: 'processStatusType'
            }
        });
    }, []);

    return (
        <AdvancedSearch onReset={handleSubmit} onSubmit={handleSubmit} form={form}>
            <Form.Item label={searchProps.label}>
                {getFieldDecorator('title')(<Input placeholder={searchProps.placeholder} allowClear />)}
            </Form.Item>
            <Form.Item label={dateProps.label}>
                {getFieldDecorator('Time')(<RangePicker format="YYYY-MM-DD" />)}
            </Form.Item>
            <Form.Item label={typeProps.label}>
                {getFieldDecorator('templateNameList')(
                    <TreeSelect
                        treeCheckable
                        placeholder={typeProps.placeholder}
                        maxTagCount={2}
                        allowClear
                        showCheckedStrategy={TreeSelect.SHOW_ALL}
                    >
                        {renderApplytypeTreeNodes(applytype)}
                    </TreeSelect>
                )}
            </Form.Item>
        </AdvancedSearch>
    );
};

export default connect(({ loading, applyCommon }) => ({
    loading,
    applyCommon
}))(Form.create()(React.memo(SearchList)));
